<template>
  <div class="score">
    <h1>学生成绩</h1>
    <p>当前成绩:{{score}}</p>
    <input type="button" value="点击+1" v-on:click="score+=1">
    <input type="button" value="点击+10" @click="score+=10">
    <input type="button" value="点击+2 *3" @click="calc">
    <h3 v-if="score >= 90"> A 优秀</h3>
    <h3 v-else-if="score >= 80"> B 良好</h3>
    <h3 v-else-if="score >= 60"> C 及格</h3>
    <h3 v-else> D 不及格</h3>
    <h3 class="text-danger" v-show="hasError"> 存在错误</h3>
    <ul>
      <!-- <li v-for= "item in areaList" :key="item">{{item}}</li>
      <li v-for= "item of areaList" :key="item" >{{item}}</li> -->
      <li v-for= "(item,index) in areaList" :key="index" >{{index}}-{{item}}</li>
    </ul>
    <h3>渲染对象</h3>
    <ul>
      <li v-for="(value,key,index) in userInfo" :key="index">
        {{index}}-{{key}}-{{value}}
      </li>
    </ul>
    <ul>
      <li v-for="item in stuScoreList" :key="item.id" @click='addScore(item)'>
        {{item.name}}:{{item.score}}</li>
    </ul>
    <h3>事件冒泡</h3>
    <div class="panel" @click="clickDiv">
      <p @click.stop="clickP">点我啊</p>
    </div>
    <h3>触发次数</h3>
      <p @click.once="clickP">点我触发一次</p>
    <h3>默认行为</h3>
    <a href="http://baidu.com" @click.prevent="clickDiv">百度一下</a>
    <h3>键盘事件</h3>
    <input type="text" @keyup.enter="submit">
    <h3>用户登录</h3>
      <input type="text" v-model.trim="username"><br>
      <input type="password" v-model="password"><br>
      <label for=""><input type="radio" value="男" v-model="sex">男生</label>
      <label for=""><input type="radio" value="女" v-model="sex">女生</label><br>
      <select v-model="hobby" multiple>
        <option :value="option" 
         v-for="(option,index) in options" :key="index">{{option.text}}
        </option>
      </select>
      <!-- <span>您选择了:{{hobby[0].text}}</span><br> -->
      <input type="button" value="登录" @click="login">
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'score',
  data(){
    return{
      score: 56,
      hasError:true,
      areaList:['北','上','广','深'],
      userInfo:{
        'age':35,
        'name':'章三',
        'area':'北京',
        'score':78
      },
      stuScoreList:[
        {id:1,score:85,name:'张三'},
        {id:2,score:85,name:'里斯'},
        {id:3,score:85,name:'王武'},
      ],
      username:'',
      password:'',
      sex:'男',
      hobby:[],
      options:[
        {text:'篮球',value:'A'},
        {text:'足球',value:'B'},
        {text:'排球',value:'C'},
      ]
    }
  },
  methods:{
    calc(){
      return this.score = (this.score +2)*3;
    },
    addScore(stu){
      stu.score+=1

    },
    clickDiv(){
      window.alert('clickDiv')
    },
    clickP(){
      window.alert('clickP')
    },
    submit(){
      window.alert('输入完成')
    },
    login(){
      // eslint-disable-next-line
        console.log('用户名',this.username),
      // eslint-disable-next-line
        console.log('密码',this.password)
    },
  }
}
</script>
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
  li {
  display: inline-block;
  margin: 0 10px;
}
}
.text-danger {
  color: #f00;
}
.panel{
  background-color: aqua;
  padding: 5px;
  p{
    background-color: #fff;
    padding: 20px;
  }
}
</style>
